概述

#概述| 来源: 网络整理| 查看: 265

2020年02月18日，地图 JS API v1.4.15 发布更新； 2020年03月31日，地图 JS API v2.0 发布，欢迎使用。简介

高德地图 JS API 是一套 JavaScript 语言开发的的地图应用编程接口，移动端、PC端一体化设计，一套 API 兼容众多系统平台。目前 JS API 免费开放使用。

JS API 提供了2D、3D地图模式，满足绝大多数开发者对地图展示、地图自定义、图层加载、点标记添加、矢量图形绘制的需求，同时也提供了 POI 搜索、路线规划、地理编码、行政区查询、定位等众多开放服务接口。

JS API 拥有完善的文档体，系统学习地图和服务接口调用请前往教程，快速了解 JS API 的全部核心能力请前往示例中心。查阅详细接口说明文档请前往参考手册，使用遇到问题可查看常见问题或者提交工单。

功能概览特性

功能介绍与体验地图点标记图层搜索路径规划地理编码var map = new AMap.Map('container', { resizeEnable: true, zoom:11, center: [116.397428, 39.90923] });var marker, map = new AMap.Map("container", { resizeEnable: true, center: [116.397428, 39.90923], zoom: 13 }); AMap.event.addDomListener(document.getElementById('addMarker'), 'click', function() { addMarker(); }, false); AMap.event.addDomListener(document.getElementById('updateMarker'), 'click', function() { marker && updateMarker(); }, false); AMap.event.addDomListener(document.getElementById('clearMarker'), 'click', function() { if (marker) { marker.setMap(null); marker = null; } }, false); // 实例化点标记 function addMarker() { if (marker) { return; } marker = new AMap.Marker({ icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png", position: [116.405467, 39.907761] }); marker.setMap(map); } function updateMarker() { // 自定义点标记内容 var markerContent = document.createElement("div"); // 点标记中的图标 var markerImg = document.createElement("img"); markerImg.className = "markerlnglat"; markerImg.src = "https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png"; markerContent.appendChild(markerImg); // 点标记中的文本 var markerSpan = document.createElement("span"); markerSpan.className = 'marker'; markerSpan.innerHTML = "Hi，我换新装备啦！"; markerContent.appendChild(markerSpan); marker.setContent(markerContent); //更新点标记内容 marker.setPosition([116.391467, 39.927761]); //更新点标记位置 }var map = new AMap.Map('container', { resizeEnable: true, center: [116.397428, 39.90923], zoom: 13 }); //实时路况图层 var trafficLayer = new AMap.TileLayer.Traffic({ zIndex: 10 }); trafficLayer.setMap(map); var isVisible = true; AMap.event.addDomListener(document.getElementById('control'), 'click', function() { if (isVisible) { trafficLayer.hide(); isVisible = false; } else { trafficLayer.show(); isVisible = true; } }, false);var map = new AMap.Map("container", { resizeEnable: true }); AMap.service(["AMap.PlaceSearch"], function() { var placeSearch = new AMap.PlaceSearch({ //构造地点查询类 pageSize: 5, pageIndex: 1, city: "010", //城市 map: map, panel: "panel" }); //关键字查询 placeSearch.search('方恒'); });var map = new AMap.Map("container", { resizeEnable: true, center: [116.397428, 39.90923],//地图中心点 zoom: 13 //地图显示的缩放级别 }); //构造路线导航类 var driving = new AMap.Driving({ map: map, panel: "panel" }); // 根据起终点经纬度规划驾车导航路线 driving.search(new AMap.LngLat(116.379028, 39.865042), new AMap.LngLat(116.427281, 39.903719));function geocoder() { var geocoder = new AMap.Geocoder({ city: "010", //城市，默认：“全国” radius: 1000 //范围，默认：500 }); //地理编码,返回地理编码结果 geocoder.getLocation("北京市海淀区苏州街", function(status, result) { if (status === 'complete' && result.info === 'OK') { geocoder_CallBack(result); } }); } function addMarker(i, d) { var marker = new AMap.Marker({ map: map, position: [d.location.getLng(), d.location.getLat()] }); var infoWindow = new AMap.InfoWindow({ content: d.formattedAddress, offset: { x: 0, y: -30 } }); marker.on("mouseover", function(e) { infoWindow.open(map, marker.getPosition()); }); } //地理编码返回结果展示 function geocoder_CallBack(data) { var resultStr = ""; //地理编码结果数组 var geocode = data.geocodes; for (var i = 0; i < geocode.length; i++) { //拼接输出html resultStr += "" + "地址：" + geocode[i].formattedAddress + "" + ";;的地理编码结果是:;;;;坐标：" + geocode[i].location.getLng() + ", " + geocode[i].location.getLat() + "" + ";;;;匹配级别：" + geocode[i].level + ""; addMarker(i, geocode[i]); } map.setFitView(); document.getElementById("result").innerHTML = resultStr; }

下载完整示例代码

【本文地址】

公司简介

联系我们